<template>
	<view style="background-color: #F8F8F8;">
		<view  style="background-color: #fff;"><!-- class="nav-back" -->
			<top-heigth></top-heigth>
			<uv-navbar leftText="北京" :fixed="false" :title="backTitle" bg-color="rgba(0,0,0,0)" :safeAreaInsetTop="false">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<image src="/static/image/go2.png" style="width: 44rpx; height: 44rpx;" mode=""></image>
						
					</view>
				</template>
				<template v-slot:center>
					<view class="search-box">
						 <uv-input placeholder="请输入内容" fontSize="13px" style="height:50rpx;line-height: 50rpx; font-size: 26rpx;" border="none" v-model="value" @change="change"></uv-input>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot search-font">
						搜索
					</view>
				</template>
			</uv-navbar>
		</view>
		
		
		<view class="content-box m-t16">
			<view class="list-box">
				<view>
					<!-- <uv-icon size="22" name="/static/image/t-vip1.png" class="m-b8 t-vip"></uv-icon> -->
					<view class="list-head">
						<view class="img-box">
							<image class="image" src="" mode="widthFix"></image>
						</view>
						<view class="title">空闲</view>
					</view>
				</view>
				<view style="width:calc(100% - 184rpx)">
					<view class="list-center-top m-b30 m-t16">
						<view class="list-center">
							<h1 class="list-center-h1">阿斯顿发了多少</h1>
							<!-- <view class="time">
								<view class="time-b-red">最早可约</view>
								<view class="time-f-red">19:00</view>
							</view> -->
						</view>
						
						<view>
							<view class="icon-font m-b8">
								<uv-icon size="20" name="/static/image/t-more.png" style="margin-right: 8rpx;"></uv-icon>
								<!-- <view class="shop">收藏</view> -->
							</view>
						</view>
					</view>
					
					<view class="list-bottom-box">
						<view class="list-bottom">
							<view class="font" style="margin-bottom: 8rpx;">
								<span class="list-span">000分</span>服务单数 000
							</view>
							<view class="icon-font m-b8" style="justify-content: flex-start;">
								<view style="margin-right: 20rpx;">
									合同
								</view>
								<view class="shop">本店100单</view>
							</view>
							<!-- <view class="font font-flex">
								<uv-icon size="16" name="/static/image/t-shop.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">最大支持v支持</view>
							</view> -->
						</view>
						<!-- <view class="but-blue t-but">选择</view> -->
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				list:[],
				value:'',
			}
		},
		components: { TopHeigth },
		onLoad() {
			uni.$u.http.post('/api/shop/v1_0/tAppStaffContractRCA/queryTAppStaffContract',{}).then((res) => {
				this.list = res.aaData
			})
		},
		methods: {
			change(e) {
			  console.log('change', e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.notice2-list{
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		margin-top: 24rpx;
		.notice-list-l{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333;
		}
		.font{
			color: #999999;
			font-size: 24rpx; 
			margin-top: 16rpx;
			view{
				margin-top:8rpx ;
			}
		}
	}
	
	.ding{
		@include flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.search-box{
		width: 45%;
		height: 50rpx;
		border: 2rpx solid #EEEEEE;
		background: #F8F8F8 url("/static/image/t-search2.png") 36rpx center no-repeat;
		background-size:30rpx 30rpx;
		padding: 0 72rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
	.search-font{
		font-size:30rpx;
		color: #27A0FF;
	}
</style>
